<template>
  <el-space
    direction="horizontal"
    :size="5"
    class="box"
  >
    <el-tag
      v-for="(tag, index) in list"
      :key="tag.name"
      class="mx-1 pointer"
      closable
      :type="tag.type"
      @click="turnTo(tag)"
      @close="handleClose(index)"
    >
      {{ tag.name }}
    </el-tag>
  </el-space>
</template>

<script lang="ts" setup>
import { useStore } from '@/store'
import { routerTo } from '@/utils/router'
import { cloneDeep } from 'lodash-es'

const store = useStore()
const router = useRouter()
const route = useRoute()
const list = computed(() => {
  const breadcrumb = store.state.breadcrumb
  for (const item of breadcrumb) {
    item.type = route.path === item.path ? 'success' : 'info'
  }
  return breadcrumb
})
const handleClose = (index: number) => {
  const breadcrumb = cloneDeep(store.state.breadcrumb)
  if (breadcrumb[index].type === 'success') {
    if (breadcrumb.length > 1) {
      const i = index ? index - 1 : index + 1
      breadcrumb[i].type = 'success'
      const path = breadcrumb[i].path
      router.push({ path })
    }
    breadcrumb.splice(index, 1)
    store.commit('setBreadcrumb', breadcrumb)
  } else {
    store.dispatch('delBreadcrumb', index)
  }
}
const turnTo = (tag: { path: string }) => {
  const { path } = tag
  routerTo({ path }, { isKeepAlive: true })
}
</script>
<style lang="scss" scope>
.box {
  border-bottom: 1px solid #666;
  overflow-x: scroll;
  padding:4px 2px 2px;
}
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}
</style>
